/**
    jq22首页 canvas模仿
 */

window.onload = function () {
    var canvas = document.querySelector("#my-canvas"),
        ctx = canvas.getContext("2d"),
        mousePositionArr = [],
        mouseControl = false,
        dot = {
            total: 0,
            dots: [],
            lineDots: []
        };

    function changePositionArr() {
        if (mouseControl) return

        setTimeout(() => {
            mousePositionArr.push({
                x: parseInt(canvas.width * Math.random()),
                y: parseInt(canvas.height * Math.random())
            })

            mousePositionArr.shift()

            changePositionArr()
        }, parseInt(Math.random() * 1000 + 2000));
    }



    function getMousePositionArr() {
        mousePositionArr = []

        for (i = 0; i < 4; i++) {
            mousePositionArr.push({
                x: parseInt(canvas.width * Math.random()),
                y: parseInt(canvas.width * Math.random())
            })
        }
    }

    function init() {
        var i;

        initCanvas()

        getMousePositionArr()
        changePositionArr()

        for (i = 0; i < dot.total; i++) {
            dot.dots.push(new Dot())
        }

        dot.dots.forEach(v => v.draw())
    }

    function getLineTargetArea(t, range) {

        range = range || canvas.width / 20

        dot.lineDots.push(dot.dots.filter(v => (Math.abs(v.x - t.x) < range && Math.abs(v.y - t.y) < range)))
    }

    function getNearbyPoints(target, testArr) {

        return testArr.filter(v => {
            return (Math.pow(Math.pow(target.x - v.x, 2) + Math.pow(target.y - v.y, 2), 0.5) < 50)
        })
    }

    function strokeLine() {
        var arr = []

        dot.lineDots = []

        mousePositionArr.forEach(v => {
            getLineTargetArea(v)

        })

        dot.lineDots.forEach(v => {
            if (v.length > 1) {
                v.forEach(k => {
                    arr = getNearbyPoints(k, v)
                    if (arr.length > 0) {
                        arr.forEach(m => {
                            ctx.beginPath()
                            ctx.moveTo(k.x, k.y)
                            ctx.strokeStyle = Dot.prototype.randomColor.call()
                            ctx.lineTo(m.x, m.y)
                            ctx.stroke()
                            ctx.closePath()
                        })
                    }
                })
            }
        })
    }

    function initCanvas() {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        ctx.lineWidth = .3

        dot.total = canvas.width * .3
        dot.dots = []
        dot.lineDots = []
    }

    function Dot() {
        this.x = parseInt(Math.random() * canvas.width)
        this.y = parseInt(Math.random() * canvas.height)
        this.xV = Math.random() - 0.5
        this.yV = Math.random() - 0.5
        this.color = this.randomColor()
        this.radius = Math.random() * 2
    }

    Dot.prototype = {
        draw: function () {
            ctx.beginPath()
            ctx.fillStyle = this.color
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
            ctx.fill()
        },
        randomColor: function (min) {
            var r, g, b;

            min = min || 0

            r = parseInt(Math.random() * (255 - min) + min)
            g = parseInt(Math.random() * (255 - min) + min)
            b = parseInt(Math.random() * (255 - min) + min)

            return 'rgba(' + r + ', ' + g + ', ' + b + ', .8)'
        },
        move: function () {
            this.x += this.xV
            this.y += this.yV

            if (this.x > canvas.width || this.x < 0) {
                this.xV = -this.xV
            }

            if (this.y > canvas.height || this.y < 0) {
                this.yV = -this.yV
            }
        }
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        dot.dots.forEach(v => {
            v.move()
            v.draw()
        })

        strokeLine()

        requestAnimationFrame(render)
    }

    init()
    render()

    canvas.addEventListener("mousemove", function (e) {
        mouseControl = true
        mousePositionArr = [{
            x: parseInt(e.clientX),
            y: parseInt(e.clientY)
        }]
    })

    canvas.addEventListener("mouseout", function () {
        mouseControl = false
        getMousePositionArr()
        changePositionArr()
    })
}